﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Content/ueditor/ueditor.config.js"></script>
    <script src="~/Content/ueditor/ueditor.all.min.js"></script>
    <link href="~/Content/Easy_UI/css/easyui.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/icon.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/menu.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/Easy_UI/js/datapattern.js"></script>
    <script src="~/Content/Easy_UI/js/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/Easy_UI/js/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //隐藏添加,修改From表单
            $("#addDiv").css("display", "none");
            $("#editDiv").css("display", "none");
            loadData();
        });

        var text_desc;
        var text_tempform;
        //加载数据
        function loadData(pars) {
            $('#tt').datagrid({
                url: '/WFTemp/ShowAllWFTemp',
                title: '流程模板数据',
                width: 800,
                height: 505,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'Id',//主键列的列明
                loadMsg: '正在加载模板的信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],
                queryParams: pars,//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'TempName', title: '模板名称', width: 100 },
                    { field: 'ActityType', title: '模板类型', width: 150 },
                    { field: 'Desc', title: '描述', width: 120 },
                    { field: 'Remark', title: '备注', width: 120 }
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addInfo();
                    }
                }, {
                    id: 'btnEidt',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        showEditInfo();//展示要修改的用户数据
                    }
                }],
            });
        }

        //删除数据
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (!rows || rows.length == 0) {
                //alert("请选择要删除的商品！");
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }

            $.messager.confirm("提示", "确定要删除数据吗？", function (r) {
                if (r) {
                    //要删除数据，获取要删除的记录的Id
                    var strId = "";
                    for (var i = 0; i < rows.length; i++) {
                        strId = strId + rows[i].Id + ",";
                    }
                    //去掉最后一个逗号“，”
                    strId = strId.substr(0, strId.length - 1);
                    //将获取的要删除的记录的Id值发送到服务端
                    $.post("/WFTemp/Delete", { "strId": strId }, function (data) {
                        if (data == "ok") {
                            //"reload"方法加载表格不会跳转到第一页
                            $('#tt').datagrid("reload");

                            //清除上次操作的历史的记录 异步请求会把上次操作的id继续带上
                            $('#tt').datagrid('clearSelections');
                        }
                        else {
                            $.messager.alert("提醒", "删除失败！", "error")
                        }
                    });
                }
            });
        }

        //添加数据
        function addInfo() {
            $("#addDiv").css("display", "block");
            $("#addDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "确定",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#addForm"));

                        $("#addForm").submit();//提交表单
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

        //完成添加后调用该方法
        function afterAdd(data) {
            if (data = "ok") {
                $("#addDiv").dialog("close");
                $.messager.alert("提示", "添加成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");

                //添加用户的操作是一个异步操作 清空文本框
                $("addForm input").val("");
            }
            else {
                $.messager.alert("提示", "添加失败");
            }
        }

        //表单校验
        function validateInfo(control) {
            control.validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
                rules: {//表示验证规则
                    UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    ShowName: "required",
                    UPwd: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    UName: "请输入用户名",
                    ShowName: "请输入姓名",
                    UPwd: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字符")
                    }
                }
            });
        }

        //展示要修改的用户数据
        function showEditInfo() {
            //在弹窗之前要拿到要修改的用户的数据
            //判断一下用户是否选择了要修改的数据
            var rows = $("#tt").datagrid("getSelections");//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要修改的数据", "error");
                return;//跳出此方法
            }

            //将要修改的数据查询出来，显示到文本框中
            var id = rows[0].Id;
            $.get("/WFTemp/Edit", { "id": id }, function (data) {
                //这里其实返回回来的是一个json对象,进行数据绑定
                $("#txtId").val(data.Id);
                $("#txtDelFlag").val(data.DelFlag);
                $("#txtSubTime").val(data.SubTime);
                $("#textTemName").val(data.TemName);
                text_desc = data.Desc;
                text_tempform = data.TempForm;
                $("#textActityType").val(data.ActityType);
                $("#textRemark").val(data.Remark);
            });

            $("#editDiv").css("display", "block");
            $("#editDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "ok",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#editForm"));

                        $("#editForm").submit();//提交表单
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $("#editDiv").dialog("close");
                    }
                }]
            });
        }

        //更新以后调用的方法
        function afterEdit(data) {
            if (data = "ok") {
                $("#editDiv").dialog("close");
                $.messager.alert("提示", "更新成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");
            }
            else {
                $.messager.alert("提示", "更新失败");
            }
        }
    </script>
</head>
<body>
    <div>
        <table id="tt" style="width:600px;" title="标题" iconcls="icon-edit"></table>
    </div>
    <!-----------------------添加数据------------------------------>
    <div id="addDiv" style="width:800px;height:600px;" title="添加模板数据">
        @using (Ajax.BeginForm("AddTemp", "WFTemp", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><th>模&nbsp;板&nbsp;名&nbsp;称:</th><td><input type="text" class="easyui-textbox" name="TemName" /></td></tr>
                <tr><th>模&nbsp;板&nbsp;类&nbsp;型:</th><td><input type="text" class="easyui-textbox" name="ActityType" /></td></tr>
                <tr><th>流&nbsp;程&nbsp;描&nbsp;述:</th><td><textarea id="textDesc" name="Desc" style="width:300px; height:150px;"></textarea> </td></tr>
                <tr><th>表&nbsp;单&nbsp;模&nbsp;板:</th><td><textarea id="textTempForm" name="TempForm" style="width:300px; height:150px;"></textarea> </td></tr>
                <tr><th>备&nbsp;注:</th><td><input type="text" class="easyui-textbox" name="Remark" /></td></tr>
            </table>
        }
    </div>

    <!-----------------------修改数据------------------------------>
    <div id="editDiv" style="width:800px;height:600px;" title="修改模板数据">
        @using (Ajax.BeginForm("Edit", "WFTemp", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
        {
            <input type="hidden" name="Id" id="txtId" />
            <input type="hidden" name="DelFlag" id="txtDelFlag" />
            <input type="hidden" name="SubTime" id="txtSubTime" />
            <table>
                <tr><th>模&nbsp;板&nbsp;名&nbsp;称:</th><td><input type="text" class="easyui-textbox" id="textTemName" name="TemName" /></td></tr>
                <tr><th>模&nbsp;板&nbsp;类&nbsp;型:</th><td><input type="text" class="easyui-textbox" id="textActityType" name="ActityType" /></td></tr>
                <tr><th>流&nbsp;程&nbsp;描&nbsp;述:</th><td><textarea id="Desc" name="Desc" style="width:300px; height:150px;"></textarea> </td></tr>
                <tr><th>表&nbsp;单&nbsp;模&nbsp;板:</th><td><textarea id="TempForm" name="TempForm" style="width:300px; height:150px;"></textarea> </td></tr>
                <tr><th>备&nbsp;注:</th><td><input type="text" id="textRemark" class="easyui-textbox" name="Remark" /></td></tr>
            </table>
        }
    </div>
    <script type="text/javascript">
        var addtempForm = UE.getEditor("textTempForm", {
            initialFrameWidth: 700,
            initialFrameHeight: 300
        });

        var adddesc = UE.getEditor("textDesc", {
            initialFrameWidth: 700,
            initialFrameHeight: 300
        });

        var edittempForm = UE.getEditor("TempForm", {
            initialFrameWidth: 700,
            initialFrameHeight: 300
        });

        var editdesc = UE.getEditor("Desc", {
            initialFrameWidth: 700,
            initialFrameHeight: 300
        });

        var tempForm = UE.getEditor('TempForm');
        tempForm.ready(function () {
            tempForm.setContent(text_tempform);
        });

        var desc = UE.getEditor('Desc');
        desc.ready(function () {
            desc.setContent(text_desc);
        });
       
    </script>
</body>
</html>
